<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="tfn" uri="http://www.totoro.com/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<style>

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none !important;
        margin: 0;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>
<div class="main-wrap J_TRegion">
    <input type="hidden" id="brandId" value="${param.brandId}"/>
    <div class="J_TModule">
        <div class="skin-box tb-module tshop-pbsm tshop-pbsm-tmall-srch-list"id="TmshopSrchNav">
            <div id="J_ShopSearchResult">
                <img style="display: none;"
                     src="//gm.mmstat.com/inshopse?logtype=2&amp;gokey=at_bucketid%3D%26srppage%3D1%26scid%3D1450113858%26lf_aclog%3D0-0-90-hotsell_desc-2200657715182%26%3Fsrc%3Dshopsystem--33.7.193.60%26ss_bucket%3D2%26rank_src%3Dinshop_pc_tm%26buyernick%3Dansen16195%26shop_id%3D294622145%26navigator%3Dall%26scid%3D1450113858%26stat%3Dsku_or%2Ctype%3Acnt%2Ccount%3A1000%26order%3Dtotal_sold_quantity%3Ades%26s%3D0%26n%3D90%26app%3Dinshop%26outfmt%3Djson%26bts%3D%257B%257D%26stats_click%3D%26rn%3Deedbba44e375e5358df98b3bc00a24fb%26is_pv%3D1%26found_num%3D90%26item_list%3D610698022901%2C586872869749%2C587007726808%2C634284835586%2C637626007033%2C616945578602%2C612345787324%2C587008410168%2C620011908768%2C615632384608%2C623225009928%2C628310843523%2C587008070389%2C631653352671%2C586872937559%2C630955495056%2C627395706675%2C619244347470%2C602648030453%2C633790342235%2C602440565287%2C611794697724%2C620842063416%2C611862029334%2C638604294785%2C636830996063%2C612198772267%2C637924468321%2C586873201321%2C586873357218%2C618864362849%2C599830346136%2C599830054040%2C606342313473%2C597297917525%2C600014167688%2C599628029868%2C630137757784%2C614548514535%2C610942279976%2C617958998570%2C600521203738%2C586873093616%2C599829694359%2C600521011868%2C587008074626%2C615650413973%2C595466864257%2C599397588707%2C596052491515%2C624884737424%2C601073516589%2C601357442467%2C605261685328%2C619417460870%2C595866466135%2C624571552094%2C595697657197%2C601157053209%2C605218448097%2C615395217476%2C599628245844%2C600014235329%2C613699122928%2C637498466998%2C587161339832%2C630843466067%2C614020072546%2C628028246577%2C627656309275%2C641464741028%2C645681674739%2C619157783242%2C619157927071%2C613179644718%2C622374293551%2C595697549103%2C601357646282%2C593865317266%2C591437378893%2C600521251239%2C595460684610%2C619985310413%2C602647870677%2C599628341989%2C619157723197%2C614548582503%2C609523107743%2C599902668199%2C614020516558%2C&amp;rn=3b3bf96ebeaf997ca93abfb013a03d32&amp;bc_type=b&amp;cna=pw0EGYnRzWcCAdyqso7TIoj+"
                     width="0" height="0">
                <div class="skin-box-bd">
                    <div class="crumb J_TCrumb">
                        <input type="hidden" class="J_TSearchLog"value="//fashionglobal.tmall.hk/i/asyn.htm">
                        <div class="crumbCon">
                            <div class="crumbSlide J_TCrumbSlide">
                                <a class="ui-slide-arrow-s crumbSlide-prev J_TCrumbSlidePrev"title="上一页" style="visibility: hidden;"> &lt;</a>
                                <div class="crumbClip">
                                    <ul class="crumbSlide-con clearfix J_TCrumbSlideCon">
                                        <input type="hidden" class="J_TSearchLog" value="$skeyword">
                                        <input type="hidden"class="J_TSearchLog" value="$skeyword1">
                                        <input type="hidden" class="J_TSearchLog" value="$skeyword2">
                                        <li>
                                            <a data-cat="" class="crumbStrong" href="/shop/category.htm?brandId=${param.brandId}" title="所有分类">所有分类</a>
                                            <i class="crumbArrow">&gt;</i>
                                        </li>
                                        <c:if test="${!empty param.shopCategory}">
                                            <li>
                                                <div class="crumbDrop J_TCrumbDrop">
                                                    <a href="/shop/category.htm?brandId=${param.brandId}&shopCategory=${param.shopCategory}" class="crumbStrong crumbDrop-hd J_TCrumbDropHd">
                                                            ${allCategory.get(param.shopCategory+="").scName}
                                                        <i></i>
                                                    </a>
                                                </div>
                                                <i class="crumbArrow">&gt;</i>
                                            </li>
                                        </c:if>
                                        <li class="crumbSearch">
                                            <form class="J_TCrumbSearchForm">
                                                <input type="hidden"value="hotsell_desc" name="orderType">
                                                <input type="hidden" value="grid"name="viewType">
                                                <input type="hidden"name="catId" value="1450113858">
                                                <label class="crumbSearch-label">
                                                    <input type="text" class="crumbSearch-input J_TCrumbSearchInuput" value="${param.keyWord}" name="keyword">
                                                </label>
                                                <input type="hidden" value="" name="lowPrice">
                                                <input type="hidden" value="" name="highPrice">
                                                <c:if test="${pageType == 'search'}">
                                                <input type="button" class="crumbSearch-btn J_TCrumbSearchBtn" id="publicSearch"/>
                                                </c:if>
                                                <c:if test="${pageType == 'category'}">
                                                    <input type="button" class="crumbSearch-btn J_TCrumbSearchBtn" id="categorySearch"/>
                                                </c:if>
                                            </form>
                                        </li>
                                    </ul>
                                </div>
                                <a class="ui-slide-arrow-s crumbSlide-next J_TCrumbSlideNext"title="下一页" style="visibility: hidden;"> &gt;</a>
                            </div>
                        </div>
                    </div>

                    <div class="filter clearfix J_TFilter">
                        <form>
                            <input type="hidden">
                            <input type="hidden">
                            <input type="hidden">
                            <input type="hidden">
                            <input type="hidden">
                            <c:if test="${pageType == 'category'}">
                                <a class="fSort ${empty param.orderType?'fSort-cur':''}" href="/shop/category.htm?brandId=${param.brandId}&shopCategory=${param.shopCategory}&orderType=">综合排序</a>
                                <a class="fSort ${param.orderType=='hotsell_desc'?'fSort-cur':''}" href="/shop/category.htm?brandId=${param.brandId}&shopCategory=${param.shopCategory}&orderType=hotsell_desc">
                                    销量
                                    <i class="f-ico-arrow-d"></i>
                                </a>
                                <a class="fSort ${param.orderType=='newOn_desc'?'fSort-cur':''}" href="/shop/category.htm?brandId=${param.brandId}&shopCategory=${param.shopCategory}&orderType=newOn_desc">
                                    新品
                                    <i class="f-ico-arrow-d"></i>
                                </a>
                                <a class="fSort ${param.orderType=='hotkeep_desc'?'fSort-cur':''}" href="/shop/category.htm?brandId=${param.brandId}&shopCategory=${param.shopCategory}&orderType=hotkeep_desc">
                                    收藏
                                    <i class="f-ico-arrow-d"></i>
                                </a>
                                <a class="fSort ${param.orderType=='price_asc' or param.orderType =='price_desc'?'fSort-cur':''}" href="/shop/category.htm?brandId=${param.brandId}&shopCategory=${param.shopCategory}&orderType=${empty param.orderType or param.orderType=='price_desc'?'price_asc':'price_desc'}">
                                    价格
                                    <i class="f-ico-triangle-mt "></i>
                                    <i class="f-ico-triangle-mb "></i>
                                </a>
                            </c:if>
                            <c:if test="${pageType == 'search'}">
                                <c:set var="publicUrl" value="/shop/search.htm?brandId=${param.brandId}&keyWord=${param.keyWord}&lowPrice=${param.lowPrice}&highPrice=${param.highPrice}"></c:set>
                                <a class="fSort ${empty param.orderType?'fSort-cur':''}" href="${publicUrl}&orderType=">综合排序</a>
                                <a class="fSort ${param.orderType=='hotsell_desc'?'fSort-cur':''}" href="${publicUrl}&orderType=hotsell_desc">
                                    销量
                                    <i class="f-ico-arrow-d"></i>
                                </a>
                                <a class="fSort ${param.orderType=='newOn_desc'?'fSort-cur':''}" href="${publicUrl}&orderType=newOn_desc">
                                    新品
                                    <i class="f-ico-arrow-d"></i>
                                </a>
                                <a class="fSort ${param.orderType=='hotkeep_desc'?'fSort-cur':''}" href="${publicUrl}&orderType=hotkeep_desc">
                                    收藏
                                    <i class="f-ico-arrow-d"></i>
                                </a>
                                <a class="fSort ${param.orderType=='price_asc' or param.orderType =='price_desc'?'fSort-cur':''}" href="${publicUrl}&orderType=${empty param.orderType or param.orderType=='price_desc'?'price_asc':'price_desc'}">
                                    价格
                                    <i class="f-ico-triangle-mt "></i>
                                    <i class="f-ico-triangle-mb "></i>
                                </a>
                            </c:if>
                            <div class="fPrice J_TFPrice">
                                <div class="fP-box">
                                    <b class="fPb-item">
                                        <i class="ui-price-plain">￥</i>
                                        <input type="number" class="J_TFPInput" id="firstPrice" autocomplete="off" value="${param.lowPrice}">
                                    </b>
                                    <i class="fPb-split"></i>
                                    <b class="fPb-item">
                                        <i class="ui-price-plain">￥</i>
                                        <input type="number" class="J_TFPInput" id="lastPrice" autocomplete="off" value="${param.highPrice}">
                                    </b>
                                </div>
                                <div class="fP-expand">
                                    <a class="ui-btn-s J_TFPCancel" id="removeAll">清空</a>
                                    <a class="ui-btn-s-primary J_TFPEnter" id="confirmPrice">确定</a>
                                </div>
                            </div>
                        </form>
                        <p class="ui-page-s">
                            <fmt:formatNumber var="c" value="${(allCount  +  90  - 1) / 90}" pattern="#"/>
                            <b class="ui-page-s-len">${empty param.curr?'1':param.curr}/${c}</b>
                            <c:if test="${empty param.curr or param.curr == 1}" var="prevTerm">
                                <b title="上一页"class="ui-page-s-prev">&lt;</b>
                            </c:if>
                            <c:if test="${!prevTerm}">
                                <a title="上一页"class="ui-page-s-prev">&lt;</a>
                            </c:if>
                            <c:if test="${param.curr == c or (empty param.curr and c == 1)}" var="nextTerm">
                                <b title="下一页"class="ui-page-s-next">></b>
                            </c:if>
                            <c:if test="${!nextTerm}">
                                <a title="下一页"class="ui-page-s-next">></a>
                            </c:if>
                        </p>
                    </div>
                    <div class="J_TItems">
                        <div class="item4line1" style="overflow:hidden;">
                            <c:forEach items="${products}" var="product" varStatus="vs">
                                <dl class="item " style="border: 4px solid #f5f5f5">
                                    <dt class="photo">
                                        <a class="J_TGoldData" href="/buy.htm?pid=${product.id}" target="_blank">
                                            <img src="${product.productImages.get(0).imagePath}">
                                        </a>
                                    </dt>
                                    <dd class="detail">
                                        <a class="item-name J_TGoldData" href="/buy.htm?pid=${product.id}" target="_blank">
                                            ${tfn:filterKeywordsByString(product.productName, param.keyWord)}
                                        </a>
                                        <div class="attribute">
                                            <div class="cprice-area">
																	<span class="symbol">
																		¥
																	</span>
                                                <span class="c-price">
                                                        ${tfn:formatNumber(product.nowPrice, 2)}
                                                </span>
                                            </div>
                                            <div class="coupon-area"> </div>
                                        </div>
                                    </dd>
                                </dl>
                            </c:forEach>
                        </div>
                        <c:if test="${allCount == 0}">
                            <div>
                                <div class="no-result-new ">
                                    <p class="item-not-found"><strong>没找到符合条件的商品,换个条件或关键词试试吧。</strong>
                                    </p>
                                </div>
                            </div>
                        </c:if>

                        <!-- 分页 start -->
                        <div id="pagination" style="float: right">

                        </div>
                        <div class="comboHd">
                            <p>本店内推荐</p>
                        </div>
                        <div class="item4line1">
                            <c:forEach items="${goodProducts}" var="product">
                                <dl class="item ">
                                    <dt class="photo">
                                        <a class="J_TGoldData" href="/buy.htm?pid=${product.id}" target="_blank">
                                            <img src="${product.productImages.get(0).imagePath}">
                                        </a>
                                    </dt>
                                    <dd class="detail">
                                        <a class="item-name J_TGoldData" href="/buy.htm?pid=${product.id}" target="_blank">
                                            ${product.productName}
                                        </a>
                                        <div class="attribute">
                                            <div class="cprice-area">
																	<span class="symbol">
																		¥
																	</span>
                                                <span class="c-price">
																		${tfn:formatNumber(product.nowPrice, 2)}
																	</span>
                                            </div>
                                            <div class="coupon-area"> </div>
                                        </div>
                                    </dd>
                                    <div class="sale-area">总销量：<span class="sale-num">${product.dealCount}</span>
                                    </div>
                                    <dd class="rates">
                                        <div class="title">
                                            <h4>|<a href="">
                                                <span>评价: ${product.commentCount}</span>
                                            </a>
                                            </h4>
                                        </div>
                                    </dd>
                                </dl>
                            </c:forEach>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
<script>
    $(".J_TFPInput").focus(function(){
        setTimeout(v =>{
            $(".J_TFPrice").addClass("fPrice-hover");
            $(".ui-price-plain").css("display","none");
            $(".fP-expand").css("display","block");
        }, 100);
    }).blur(function(){
        setTimeout(v=>{
            $(".J_TFPrice").removeClass("fPrice-hover");
            $(".ui-price-plain").css("display","block");
            $(".fP-expand").css("display","none");
        },100);
    });

    // 清空输入的价格
    $("#removeAll").click(function () {
        $("#firstPrice").val("");
        $("#lastPrice").val("");
        var newUrl = Totoro.deleteURLPar(window.location.href, "lowPrice");
        var finalUrl = Totoro.deleteURLPar(newUrl, "highPrice");
        window.history.pushState(null,null,finalUrl);
        $(".J_TFPInput").focus();
    });
    // 确认价格区间
    $("#confirmPrice").click(function () {
        var lowPrice = $("#firstPrice").val();
        var highPrice = $("#lastPrice").val();
        var lowUrl = Totoro.changeURLPar(window.location.href, "lowPrice", lowPrice);
        var finalUrl = Totoro.changeURLPar(lowUrl, "highPrice", highPrice);
        window.location.href=finalUrl;
    })

    // 搜索分类或者普通搜索
    $("#categorySearch").click(function () {
        var val = $(".J_TCrumbSearchInuput").val();
        var brandId = $("#brandId").val();
        var shopCategory = Totoro.getQueryVariable("shopCategory");
        if(shopCategory !='') {
            window.location.href = "/shop/category.htm?brandId=" + brandId + "&shopCategory="+shopCategory+"&keyWord=" + val;
        } else {
            window.location.href = "/shop/category.htm?brandId=" + brandId + "&keyWord=" + val;
        }
    });

    $("#publicSearch").click(function () {
        var val = $(".J_TCrumbSearchInuput").val();
        var brandId = $("#brandId").val();
        window.location.href = "/shop/search.htm?brandId="+brandId+"&keyWord="+val;
    })

    // 多条件查询，点击销量才需，新品等等


    // 上方控制分页
    $("a.ui-page-s-prev").click(function () {
        var curr = parseInt(Totoro.getQueryVariable("curr"));
        var newUrl = Totoro.changeURLPar(window.location.href, "curr", curr-1);
        window.location.href = newUrl;
    });

    $("a.ui-page-s-next").click(function () {
        var curr = parseInt(Totoro.getQueryVariable("curr"));
        var newUrl = Totoro.changeURLPar(window.location.href, "curr", curr+1);
        window.location.href = newUrl;
    });

    // 分页
    layui.use(['laypage', 'layer'], function() {
        var laypage = layui.laypage
        laypage.render({
            elem: 'pagination'
            ,count: ${allCount}
            ,limit: 90
            , layout: ['count', 'prev', 'page', 'next', 'skip']
            ,curr: Totoro.getQueryVariable("curr")
            ,theme: '#1E9FFF'
            , jump: function(obj, first){
                //首次不执行
                if(!first){
                    var newUrl = Totoro.changeURLPar(window.location.href, "curr", obj.curr);
                    window.location.href = newUrl;
                }
            }
        });
    });
</script>
